<template>
  <div class="mh100vh bgf5 rel">
    <div class="f ac xc bgf" style="height:60px;">
      <div @click="isShowAdd=true" class="mr10 bgec6102 gf f ac xc rds20 pt5 pb5 pl10 pr15 poi">
        <svg t="1741682000787" class="mr5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7483" width="20" height="20"><path d="M514.048 62.464q93.184 0 175.616 35.328t143.872 96.768 96.768 143.872 35.328 175.616q0 94.208-35.328 176.128t-96.768 143.36-143.872 96.768-175.616 35.328q-94.208 0-176.64-35.328t-143.872-96.768-96.768-143.36-35.328-176.128q0-93.184 35.328-175.616t96.768-143.872 143.872-96.768 176.64-35.328zM772.096 576.512q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-192.512 0 0-192.512q0-26.624-18.944-45.568t-45.568-18.944-45.056 18.944-18.432 45.568l0 192.512-192.512 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l192.512 0 0 191.488q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568l0-191.488 192.512 0z" p-id="7484" fill="#ffffff"></path></svg>
        新增
      </div>
      <el-input v-model="keywords" @input="searchVal" style="width: 500px" placeholder="请输入网址" />
    </div>
    <div class="mt10 ml10 mr10">
      <div v-if="listObj.isLoad && listObj.list.length == 0" class="pt100 pb100 f ac xc bgf">暂无数据</div>
      <div
        v-for="item in listObj.list.filter(v => v.isShow)"
        :key="item.id"
        class="f ac pl10 poi rds10 pt10 pb10 pr30 bgf mb20"
        style="box-shadow: 2px 2px 2px 2px rgba(0,0,0,.1)"
        @click="openUrl(item)"
      >
        <img :src="item.screenShot" style="width:60px;height:60px;" alt="" />
        <div class="f1 fs20 b ml10">{{item.name}}</div>
        <div @click.stop="delUrl(item.id)" class="bgff4444 gf f ac xc rds20 pt5 pb5 pl15 pr15 poi">删除</div>
      </div>
    </div>
  </div>
  <!--添加url地址---->
  <AddUrl :isShow="isShowAdd" @setIsShow="e => isShowAdd = e" @addUrl="addUrl"></AddUrl>
</template>
<script>
import f from "./index.js"
import { defineAsyncComponent } from 'vue';
export default {
  components: {
    AddUrl:  defineAsyncComponent(() =>import('./components/AddUrl/index.vue')),
  },
  props: {},
  emits: [],
  setup(props, { emit }) {
    return f(props, emit)
  }
}
</script>
<style scoped></style>